<template>
    <div class="blog">
        <div class="add" style="display: flex;justify-content: flex-end;">
            <el-button type="primary" size="default" @click="add_essay"
                style="font-size: 30px;margin-right: 2vw;margin-bottom: 1vw;font-weight: bold;">+</el-button>

        </div>
        <el-table :data="eassay_list" style="width: 90%">
            <el-table-column label="发布时间" width="180">

                <template #default="scope">
                    <div style="display: flex; align-items: center">

                        {{ scope.row.publish_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="最后修改时间" width="180">

                <template #default="scope">
                    <div style="display: flex; align-items: center">

                        {{ scope.row.end_time }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="标题" width="180">
                <template #default="scope">
                    <el-tag>{{ scope.row.title }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="内容" width="180">
                <template #default="scope">
                    <el-tag>{{ scope.row.textual }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="类型" width="180">
                <template #default="scope">
                    <el-tag type="success">{{ scope.row.Essay_type == "0" ? '博客' : '日常' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="deletes(scope.row)">
                        <template #reference>
                            <el-button type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination v-model:current-page="currentPage" @current-change="handleCurrentChange"
                layout="prev, pager, next" :page-size="10" background :total="count" />
        </div>

    </div>
</template>

<script setup lang="ts">
import EssayStore from "@/store/EssayStore"
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { type Eassay_edit } from "@/types/Eassy";
import { format } from "@/utils/formatTime"
const currentPage = ref(1)
const router = useRouter()
const store = EssayStore()
const count = ref(0)
const eassay_list = ref<Eassay_edit[]>([])
onMounted(() => {
    getData()
})
const getData = async () => {
    const result = await store.get_list(currentPage.value * 10 - 10)
    count.value = result.count
    result.data.forEach((item: any, index: any) => {
        result.data[index].publish_time = format.formatDate(item.publish_time)
        result.data[index].end_time = format.formatDate(item.end_time)
    });
    eassay_list.value = result.data
    console.log(result)
}
const handleCurrentChange = async (e: any) => {
    e
    getData()

}


const handleEdit = (index: number, row: any) => {
    index
    router.push(`/back/update_music/${row._id}`)
}

const deletes = async (row: any) => {
    await store.delete_essay(row._id)
    getData()
}
const add_essay = () => {
    router.push('/back/edit_music')

}


</script>

<style scoped lang="scss">
.blog {


    .page {
        margin-top: 2vw;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

}
</style>